<template>
    <div>
        <el-dialog
            :title="this.$t('ExpressCargoManagementLang.CoSourcing')"
            :visible.sync="Visible"
            width="100%"
            fullscreen
            ref="coSourcing_box"
            :close-on-click-modal="false"
      @close="cancel"
        >
            <div class="midContant clearfix">
              <div class="dialogBox top">
                    <div class="dialogBoxItem">
                      <div style="width: 16%" class="dialogBoxItemRow">
                            <div class="title">
                                <div class="RequiredRowTip">*</div>
                                {{ $t('ExpressCargoManagementLang.Express_Number') }}:
                            </div>
                            <div class="contant">
                                <el-input
                                    ref="express_sn"
                                    @blur="handleBlur('express_sn', $event)"
                                    @focus="handleFocus($event)"
                                    :placeholder="$t('common.input_plactholder')"
                                    v-model="data.express_sn"
                                ></el-input>
                            </div>
                        </div>
                        <div style="width: 16%" class="dialogBoxItemRow">
                            <div class="title">
                                <div class="RequiredRowTip">*</div>
                                {{ $t('ExpressCargoManagementLang.weight') }}:
                            </div>
                            <div class="contant">
                                <el-input-number
                                    controls-position="right"
                                    size="small"
                                    ref="gross_weight"
                                    @blur="handleBlur('gross_weight', $event)"
                                    @focus="handleFocus($event)"
                                    :min="0"
                                    :precision="2"
                                    v-model="data.gross_weight"
                                >
                                </el-input-number>
                            </div>
                        </div>
                        <div style="width: 16%" class="dialogBoxItemRow">
                            <div class="title">
                                <div class="RequiredRowTip">*</div>
                                {{ $t('ExpressCargoManagementLang.volume') }}:
                            </div>
                            <div class="contant">
                                <el-input-number
                                  controls-position="right"
                                  size="small" 
                                  ref="volume" 
                                  @blur="handleBlur('volume', $event)" 
                                  @focus="handleFocus($event)"
                                  @change="handleChange('volume')" 
                                  :min="0"  
                                  :precision="5"
                                  v-model="data.volume">
                                </el-input-number>
                            </div>
                        </div>
                        <div style="width: 16%" class="dialogBoxItemRow">
                            <div class="title">{{ $t('ExpressCargoManagementLang.Length') }}:</div>
                            <div class="contant">
                                <el-input-number
                                    controls-position="right"
                                    size="small"
                                    @change="handleChange('length')"
                                    :min="0"
                                    :precision="0"
                                    v-model="data.length"
                                >
                                </el-input-number>
                            </div>
                        </div>
                        <div style="width: 16%" class="dialogBoxItemRow">
                            <div class="title">{{ $t('ExpressCargoManagementLang.Width') }}:</div>
                            <div class="contant">
                                <el-input-number
                                    controls-position="right"
                                    size="small"
                                    @change="handleChange('width')"
                                    :min="0"
                                    :precision="0"
                                    v-model="data.width"
                                >
                                </el-input-number>
                            </div>
                        </div>
                        <div style="width: 16%" class="dialogBoxItemRow">
                            <div class="title">{{ $t('ExpressCargoManagementLang.Height') }}:</div>
                            <div class="contant">
                                <el-input-number
                                    controls-position="right"
                                    size="small"
                                    ref="height"
                                    @blur="handleBlur('height', $event)"
                                    @focus="handleFocus($event)"
                                    @change="handleChange('height')"
                                    :min="0"
                                    :precision="0"
                                    v-model="data.height"
                                >
                                </el-input-number>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="display: flex; height: calc(100% - 60px)">
                    <div style="position: relative" :style="{ width: level_1_width + 'px',height:'100%' }">
                      <div class="headerBox">{{$t('ExpressCargoManagementLang.falseCosourcing')}}</div>
                        <MyTable
                            ref="ExpressCargoManagement_CoSourcing_table_level_1"
                            :gridOptions="{
                                checkboxConfig: { checkField: 'checked', trigger: 'row', highlight: true }
                            }"
                            :tableColumn="tableColumn_level_1"
                            :tableData="tableData_level_1"
                            :isOrder="false"
                            @sendCheckBoxList="setCheckBox_level_1"
                            :CellOptionsArr="[{id:1,img:require('../../../assets/img/add.png'),label:$t('common.batch_add')},{id:2,img:require('@/assets/img/del.png'),label:$t('common.select_true')},{id:3,img:require('@/assets/img/del.png'),label:$t('common.select_false')},]"
                            @cellClick="cellClick_level_1"
                        >
                            <template v-slot:content="scope">
                                <span class="btnCLass" v-if="scope.config.templateType=='textBtn'" @click="selectItem(scope.row)">{{$t('common.select_btn')}}</span>
                                <span v-else>{{ scope.row[scope.config.prop] }}</span>
                            </template>
                        </MyTable>
                        <Pagination
                          :OnceHasNummerAll="true"
                          :isShow="false"
                          :number_all="tableData_level_1.length"
                        >
                        </Pagination>
                    </div>
                    <div :style="{ width: SeekBar_width + 'px' }" class="SeekBar" @mousedown="sum_block_ON_1"></div>
                    <div :style="{ width: level_2_width > 0 ? level_2_width + 'px' : 'unset', flex: level_2_width > 0 ? 'unset' : 1,height:'100%' }">
                      <div class="headerBox">{{$t('ExpressCargoManagementLang.trueCosourcing')}}</div>
                        <MyTable
                            ref="ExpressCargoManagement_CoSourcing_table_level_2"
                            :gridOptions="{
                                checkboxConfig: { checkField: 'checked', trigger: 'row', highlight: true }
                            }"
                            :tableColumn="tableColumn_level_2"
                            :tableData="tableData_level_2"
                            :isOrder="false"
                            @sendCheckBoxList="setCheckBox_level_2"
                            :CellOptionsArr="[{id:1,img:require('@/assets/img/del.png'),label:$t('common.batch_del')},{id:2,img:require('@/assets/img/del.png'),label:$t('common.select_true')},{id:3,img:require('@/assets/img/del.png'),label:$t('common.select_false')},]"
                            @cellClick="cellClick_level_2"
                        >
                            <template v-slot:content="scope">
                                <span class="btnCLass" v-if="scope.config.templateType=='textBtn'" @click="delItem(scope.row)">{{$t('common.del')}}</span>
                                <span v-else>{{ scope.row[scope.config.prop] }}</span>
                            </template>
                        </MyTable>
                        <Pagination
                          :OnceHasNummerAll="true"
                          :isShow="false"
                          :number_all="tableData_level_2.length"
                        >
                        </Pagination>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="confirm" size="small"
                >{{$t('common.confirm')}}</el-button
                >
                <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
            </span>
            
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        // 接收绑定参数
        midHight: [Number, String]
    },
    data() {
        return {
            Visible: false,
            is_merge_package:false,
            m_package_sn: '',
            data: {
                express_sn: '',
                gross_weight: '',
                volume: '',
                length: '',
                width: '',
                height: ''
            },
            tableColumn_level_1: [
                {
                    type: 'checkbox',
                    width: 40
                },
                {
                    checked: true,
                    label: this.$t('common.operation'),
                    prop: "operation",
                    width: 80,
                    templateType:'textBtn'
                },
                {
                    checked: true,
                    label: this.$t('ExpressCargoManagementLang.Package_number'),
                    prop: 'package_sn',
                    order: '',
                    width: 200
                },
                {
                    checked: true,
                    label: this.$t('ExpressCargoManagementLang.Express_Number'),
                    prop: 'express_sn',
                    order: ''
                }
            ],
            tableData_level_1: [],
            sendDataArr_level_1: [],
            tableColumn_level_2: [
                {
                    type: 'checkbox',
                    width: 40
                },
                {
                    checked: true,
                    label: this.$t('common.operation'),
                    prop: "operation",
                    width: 80,
                    templateType:'textBtn'
                },
                {
                    checked: true,
                    label: this.$t('ExpressCargoManagementLang.Package_number'),
                    prop: 'package_sn',
                    order: '',
                    width: 200
                },
                {
                    checked: true,
                    label: this.$t('ExpressCargoManagementLang.Express_Number'),
                    prop: 'express_sn',
                    order: ''
                }
            ],
            tableData_level_2: [],
            sendDataArr_level_2: [],
            rightWidth: 35, //右侧空白宽度
            level_1_width: 300, //默认宽度
            level_2_width: 300, //默认宽度
            level_min_width: 300, //数据组最小宽度
            SeekBar_width: 4, //拖动条宽度
            confirmTrue: true, //确定按钮保护
        };
    },
    created() {},
    mounted() {},
    deactivated() {},
    watch: {},
    methods: {
       
        init(data) {
            //监听盒子变化
            this.setWidth();
            window.addEventListener('resize', this.setWidth);
            window.addEventListener('mouseup', this.sum_block_NO);
            this.is_merge_package=data.is_merge_package//是否是已合包数据
            this.m_package_sn = data.package_sn;
            if(data.is_merge_package==1){
                this.data.express_sn=data.express_sn
                this.data.gross_weight=data.gross_weight
                this.data.volume=data.volume
                this.data.length=data.length
                this.data.width=data.width
                this.data.height=data.height
            }
            this.Visible = true;
            this.getTableData();
        },
        getTableData() {
            this.$get('allowMergePackages', { m_package_sn: this.m_package_sn }).then((res) => {
                this.tableData_level_1 = res.data;
            });
            this.$get('mergePackages', { m_package_sn: this.m_package_sn }).then((res) => {
                this.tableData_level_2 = res.data;
            });
        },
        setWidth() {
            this.$nextTick(()=>{
              let windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
              if(!this.$refs.coSourcing_box){
                return
              }
            if (windowWidth > 630) {
              this.$refs.coSourcing_box.$el.getElementsByClassName('el-dialog')[0].style.minWidth = 'unset';
                this.level_1_width = (windowWidth-this.SeekBar_width - this.rightWidth * 2) / 2, //默认宽度
                this.level_2_width = (windowWidth-this.SeekBar_width - this.rightWidth * 2) / 2;
            } else {
                this.$refs.coSourcing_box.$el.getElementsByClassName('el-dialog')[0].style.minWidth = '610px';
                this.level_1_width = 300, //默认宽度
                    this.level_2_width = 300; //默认宽度
            }
            })
        },
        sum_block_ok_1(e) {
            let windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            if (e.clientX < this.level_min_width + this.rightWidth) {
                this.level_1_width = this.level_min_width;
            } else if (e.clientX > windowWidth - this.level_min_width - this.SeekBar_width - this.rightWidth) {
                this.level_1_width = windowWidth - this.level_min_width - this.SeekBar_width - this.rightWidth;
            } else {
                this.level_1_width = e.clientX - this.rightWidth;
            }
            this.level_2_width = windowWidth - this.SeekBar_width - this.level_1_width - this.rightWidth * 2;
        },
        sum_block_ON_1(e) {
            window.addEventListener('mousemove', this.sum_block_ok_1);
            document.body.style.userSelect = 'none'; //禁止选中文字
        },
        sum_block_NO() {
            window.removeEventListener('mousemove', this.sum_block_ok_1);
            document.body.style.userSelect = 'unset'; //取消禁止选中文字
        },
        setCheckBox_level_1(data) {
            this.sendDataArr_level_1 = data;
        },
        setCheckBox_level_2(data) {
            this.sendDataArr_level_2 = data;
        },
        selectItem(row){
            let obj=this.tableData_level_1.filter(el=>{return el.package_sn==row.package_sn})[0]
            this.tableData_level_2.unshift(obj)
            this.tableData_level_2.forEach(item=>{item.checked=false})
            this.tableData_level_1=this.tableData_level_1.filter(el=>{return el.package_sn!==row.package_sn})
        },
        delItem(row){
            let obj=this.tableData_level_2.filter(el=>{return el.package_sn==row.package_sn})[0]
            this.tableData_level_1.unshift(obj)
            this.tableData_level_1.forEach(item=>{item.checked=false})
            this.tableData_level_2=this.tableData_level_2.filter(el=>{return el.package_sn!==row.package_sn})
        },
        cellClick_level_1(id) {
            if (id == 1) {
                if (this.sendDataArr_level_1.length > 0) {
                    this.tableData_level_2.unshift(...this.sendDataArr_level_1)
                    this.tableData_level_2.forEach(item=>{item.checked=false})
                    this.sendDataArr_level_1.forEach(item=>{
                      this.tableData_level_1=this.tableData_level_1.filter(el=>{return el.package_sn!==item.package_sn})
                    })
                } else {
                    this.$message.warning(this.$t('common.message_warn_text'));
                }
            } else if (id == 2) {
                this.tableData_level_1.forEach((item) => {
                    this.$refs.ExpressCargoManagement_CoSourcing_table_level_1.$refs.tableRef.setCheckboxRow(item,true);
                });
                this.sendDataArr_level_1=this.tableData_level_1.filter(item=>{return item.checked})
            } else if (id == 3) {
                this.$refs.ExpressCargoManagement_CoSourcing_table_level_1.$refs.tableRef.clearCheckboxRow();
                this.sendDataArr_level_1=[]
            }
        },
        cellClick_level_2(id) {
          if (id == 1) {
                if (this.sendDataArr_level_2.length > 0) {
                    this.tableData_level_1.unshift(...this.sendDataArr_level_2)
                    this.tableData_level_1.forEach(item=>{item.checked=false})
                    this.sendDataArr_level_2.forEach(item=>{
                      this.tableData_level_2=this.tableData_level_2.filter(el=>{return el.package_sn!==item.package_sn})
                    })
                } else {
                    this.$message.warning(this.$t('common.message_warn_text'));
                }
            } else if (id == 2) {
                this.tableData_level_2.forEach((item) => {
                    this.$refs.ExpressCargoManagement_CoSourcing_table_level_2.$refs.tableRef.setCheckboxRow(item,true);
                });
                this.sendDataArr_level_2=this.tableData_level_2.filter(item=>{return item.checked})
            } else if (id == 3) {
                this.$refs.ExpressCargoManagement_CoSourcing_table_level_2.$refs.tableRef.clearCheckboxRow();
                this.sendDataArr_level_2=[]
            }
        },
        // 提交修改
        confirm() {
            let type = true;
            if (!this.data.express_sn) {
                this.$refs.express_sn.$el.childNodes[1].style.border = '1px solid red';
                type = false;
            }
            if (!this.data.gross_weight) {
                this.$refs.gross_weight.$el.childNodes[2].childNodes[1].style.border = '1px solid red';
                type = false;
            }
            if (!this.data.volume) {
                this.$refs.volume.$el.childNodes[2].childNodes[1].style.border = '1px solid red';
                type = false;
            }
            // 是否有空值必选项标识
            if (type && this.confirmTrue) {
                this.confirmTrue = false;
                window.setTimeout(() => {
                    this.confirmTrue = true;
                }, 1000);
                let str = this.tableData_level_2.map((obj) => {return '' + obj.package_sn;}).join(',');
                let params = new FormData();
                params.append('package_sns', str);
                if(this.is_merge_package){
                  params.append('m_package_sn', this.m_package_sn);
                }
                params.append('express_sn', this.data.express_sn);
                params.append('gross_weight', this.data.gross_weight);
                params.append('volume', this.data.volume);
                params.append('length', this.data.length);
                params.append('width', this.data.width);
                params.append('height', this.data.height);
                this.$postForm('mergePackage', params).then((res) => {
                    this.confirmTrue = true;
                    if (res.success) {
                        this.$message.success(res.msg);
                        this.$emit('success');
                        this.cancel();
                    }
                });
            }
        },
        //取消修改
        cancel() {
          this.data = {
                package_sn: '',
                express_sn: '',
                gross_weight: '',
                volume: '',
                length: '',
                width: '',
                height: ''
            };
            this.tableData_level_1 = [];
            this.sendDataArr_level_1 = [];
            this.tableData_level_2 = [];
            this.sendDataArr_level_2 = [];
            this.Visible = false;
            window.removeEventListener('resize', this.setWidth);
            window.removeEventListener('mouseup', this.sum_block_NO);
        },
        //输入框、下拉框失去焦点边框变色
        handleBlur(name, event) {
            if (!this.data[name] && this.data[name] !== 0) {
                event.target.style.border = '1px solid red';
            }
        },
        //输入框、下拉框获取焦点边框变色
        handleFocus(event) {
            event.target.style.border = '1px solid #E0E3E9';
        },
        handleChange(name) {
            if (name == 'length' || name == 'width' || name == 'height') {
                this.data.volume = this.$computing(
                    (Number(this.data.length) * Number(this.data.width) * Number(this.data.height)) / 1000000,
                    'fixed',
                    5
                );
                if (this.data.volume < 0.001) {
                    this.data.volume = 0.00001;
                }
            }
            if (name == 'volume') {
                this.data.length = 0;
                this.data.width = 0;
                this.data.height = 0;
            }
        }
    }
};
</script>

<style scoped lang="less" >
/deep/ .el-dialog__body{
  height: 100%;
}
.midContant {
    border: 0;
    width: 100%;
    height: calc(100% - 80px);
    .tableBox{
      height: calc(100% - 100px);
    }
}
.dialogBox .dialogBoxItem .dialogBoxItemRow {
    width: 24%;
}
.SeekBar {
    cursor: col-resize;
}
.headerBox {
    height: 38px;
    transition: max-height 0.5s ease-out;
    margin-bottom: 15px;
    box-shadow: 0px 0px 2px#ccc;
    background-color: #EBEEF3;
    padding: 3px 10px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>